<template>
  <div class="step_box">
    <el-steps direction="vertical" :active="active" class="custom-steps" align-center>
      <el-step title="步骤 1" />
      <el-step title="步骤 2" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
      <el-step title="步骤 3" />
    </el-steps>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 1
    }
  }
}
</script>
<style lang="scss" scoped>
.step_box{
    padding: 20px;
    display: flex; /* 启用 Flexbox 布局 */
    flex-direction: column; /* 垂直布局 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    height: 100vh; /* 占满整个视口高度 */
    background-color: #f5f5f5; /* 背景色可选 */
    overflow-y: auto; /* 超出内容可滚动 */
}
::v-deep .custom-steps .el-step__title {
  height: 70px; /* 每个步骤的固定高度 */
}
</style>
